<template>

    <div class="miaosha">
        <div class="miaosha-header">
            <h3 class="miaosha-title">京东秒杀</h3>
            <div class="miaosha-hour">20 点场</div>
            <van-count-down :time="time">
                <template #default="timeData">
                    <span class="block">{{ formatTime(timeData.hours) }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ formatTime(timeData.minutes) }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ formatTime(timeData.seconds) }}</span>
                </template>
            </van-count-down>
        </div>
    </div>
    <!-- 哪些商品是可以进行秒杀的 -->
    <div class="miaosha-content">
        <div class="content-item" v-for="item in seckillList" :key="item.proid" @click="handleCellClick(item.proid)">
            <img :src="item.img1" alt="" />
            <p class="price">${{ item.originprice }}</p>
        </div>
    </div>


</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useSeckillGoods } from '@/hooks/useListItem'

import { useRouter } from 'vue-router'
const router = useRouter()

const { time, seckillList, formatTime } = useSeckillGoods()

const handleCellClick = (ids: any) => {
    console.log(ids)

    router.push(`/detail/${ids}`)
}






</script>

<style scoped lang="scss">
.colon {
    display: inline-block;
    margin: 0 4px;
    color: #1989fa;
}

.block {
    display: inline-block;
    width: 32px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: red;
    border-radius: 25%;

}




.miaosha-content {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;

    .content-item {
        width: 100px;


        img {
            width: 100%;
            height: 100px;
        }

        .price {
            // background: orange;
            margin: 5px auto 5px;
            font-weight: bold;
            color: #f2270c;
            text-align: center;
        }
    }

}

// 高亮js 样式自己加
</style>